<template>
    <fieldset>
        <legend>商品详情</legend>
        <div id="app">
            <div class="add">
                产品编号:<input type="text" v-model="code">
                品牌名称:<input type="text" v-model="productName">
                <br>
                图片地址:<input type="text" v-model="imgSrc">

                产品价格:<input type="text" v-model="price">
                <input type="button" value="添加" @click="add">
            </div>

            <div>
                <table class="tb">
                    <tr>
                        <th>
                            <input type="checkbox" v-model="allCheck" @change="allCheckChange">
                            全选
                        </th>
                        <th>产品图片</th>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                    <!-- 动态生成内容tr -->
                    <tr v-for="(item,index) of products" :key="item.id">
                        <td>
                            <input type="checkbox" v-model="checks" :value="item">
                        </td>
                        <td>
                            <img width="80" :src="item.imgSrc" alt="">
                        </td>
                        <td>
                            {{item.code}}
                        </td>
                        <td>
                            {{item.productName}}
                        </td>
                        <td>
                            {{item.price}}
                        </td>
                        <td>
                            <button @click="decrease(item)" :disabled="item.count===1">-</button>
                            &nbsp;
                            {{item.count}}
                            &nbsp;
                            <button @click="increase(item)">+</button>
                        </td>
                        <td>
                            <button @click="del(index)">删除</button>
                        </td>
                    </tr>
                </table>

                <div class="add" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
                <h4 class="add">总价格:{{total}}</h4>

            </div>
        </div>
    </fieldset>
</template>

<script>
export default {
    data(){
        return {
            //全选的值
            allCheck:false,
            checks:[],
            code: "",
            productName: "",
            imgSrc: "",
            price: "",
            //对象中的字段 产品图片 编号 产品名称 数量 价格
            products: [
                {
                    id: 1,
                    imgSrc: "https://www.52doutuwang.com/wp-content/uploads/2021/07/20210722162327_24213.jpg",
                    code: "1122",
                    productName: "吴签的签",
                    count: 1,
                    price: 0.01
                },
                {
                    id: 2,
                    imgSrc: "https://ts1.cn.mm.bing.net/th/id/R-C.edf7a1ef9fdacc6c071debc5b50dc833?rik=7rsLBtPC8o50SA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20118%2f542%2fw859h483%2f20190531%2ffdc8-hxvzhte7315115.jpg&ehk=YlmM7NGbAkW6H9blYsgEVa7CoicWQ99m%2bvYbp6fI25Q%3d&risl=&pid=ImgRaw&r=0",
                    code: "1123",
                    productName: "品如的衣柜",
                    count: 10,
                    price: 100
                }
            ]
        }
    },
    computed: {
        total() {
            // js中如何处理小数运算精度丢失的问题,转成整数来计算(*100),计算完成除以对应的放大的倍数
            let res = this.checks.reduce((total, item) => {
                return total += item.price * item.count
            }, 0)
            return res.toFixed(2)
        }
    },
    watch: {
        //直接侦听数组就行了
        checks(newChecks) {
            // console.log(newChecks)
            if (newChecks.length === this.products.length) {
                //所有的商品都被选中了,全选需要被勾起来
                this.allCheck = true;
            } else {
                this.allCheck = false;
            }
        }
    },
    methods: {
        increase(current) {
            current.count++
        },
        decrease(current) {
            current.count--
        },
        //全选box 它的勾选状态发生变化的时候,触发的事件回调
        allCheckChange() {
            // console.log(this.allCheck)
            if (this.allCheck) {
                //所有的商品都要被勾选
                this.checks = this.products;
            } else {
                //取消勾选
                this.checks = []
            }
        },
        del(index) {
            // console.log(index)
            // 删除的逻辑怎么写? 数组中通过splice方法去掉某一项,就能删除了
            let target = this.products.splice(index, 1)
            // console.log(target)
            //过滤掉checks数组中id和传入id相同的选项
            //返回checks数组中id和传入id不相同的选项
            this.checks = this.checks.filter(item => item.id !== target[0].id)
        },
        add() {
            //非空校验
            if (!this.code || !this.imgSrc || !this.price || !this.productName) {
                return
            }
            //添加的思路,收集输入框的数据,然后添加到products数组中,数组多一项,视图就会多增加一项
            let obj = {
                id: Math.random().toString(32).substring(2),
                imgSrc: this.imgSrc,
                code: this.code,
                productName: this.productName,
                count: 1,
                price: this.price
            }
            //添加到数据数组中products
            this.products.push(obj);
        }
    }
}
</script>

<style scoped>
    *{
        margin: 0;
    }
    #app {
        width: 600px;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin:5px 0;
    }
</style>